<template>
  <div class="ma-content-block  p-4">
    <div class='flex marbot16' style="width:100%;border-bottom:1px solid rgba(0,0,0,.15)" v-if="direct">
      <div class="tab font16 " :class="load_type == item.id?'actTab':''" style="padding:12px 24px" v-for="(item,index) in load_typeList" :key='index' @click="handleActive(item.id)">{{item.name}}</div>
    </div>
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      
      <template #detail_load_status="{ record }">
        <a-tag :color="record.detail_load_status == 0?'gray':'blue'" v-if='load_type != 1'>{{record.detail_load_status == 0?'待装卸':'已完成'}}</a-tag>
        <!-- <div>{{ record?.all_number_yu }} / {{ (record?.all_weight_yu - 0).toFixed(3) }}</div> -->
        <div v-if='load_type == 1'></div>
      </template>
      <template #operationBeforeExtend="{ record }" v-if="load_type">
        <!-- v-if="record?.detail_load_status == 0 && (load_type == 2 || load_type == 4) && load_status > 0" -->
        <a-link @click="zhuangxieRK(record)" v-if="record?.detail_load_status == 0 && (load_type == 2 || load_type == 4) && load_status > 0" v-auth="['prediction:loadDetail:rk']">入库</a-link>
        <a-popconfirm content="是否确定删除该条装车明细?" @ok='zhuangxieDel(record)'>
          <a-link  v-if="record?.detail_load_status == 0 && (load_type == 4 || load_type == 5)" >删除</a-link>
        </a-popconfirm>
        
      </template>
      <!-- <template #warehouse_data="{ record }">
        <div v-if='load_type == 4'>{{ record.detail_load_status == 0?'': record.warehouse_data}}</div>
        <div v-else>{{ record.warehouse_data}}</div>
      </template> -->
    </ma-crud>

    <!-- 入库选择仓位弹窗 -->
    <a-modal :mask-closable="false"  v-model:visible="showCK" title="确认入库" @cancel="handleShow" :on-before-ok="handleBeforeOk" :width="600">
      <div style="font-size:16px;margin-bottom:16px">请选择入库的仓位：</div>
      <div style="display:flex;flex-direction: column;">
        <div style="display:flex; align-items: center;margin-bottom:16px">
          <div style="width:100px">仓库：</div>
          <a-select v-model="cangId" :style="{width:'320px'}" placeholder="请选择仓库" @change="cangChang">
            <a-option v-for="(item,index) in cangkuList" :value="item.id" :key="index">{{ item.name}}</a-option>
          </a-select>
        </div>
        <div style="display:flex; align-items: center;margin-bottom:16px">
          <div style="width:100px">横：</div>
          <a-select v-model="hengId" :style="{width:'320px'}" placeholder="请选择横"  v-if="hengList.length != 0">
            <a-option v-for="(item,index) in hengList" :value="item.id" :key="index">{{ item.name }}</a-option>
          </a-select>
          <div style="width:320px;font-size:14px;padding:4px 12px;background:rgba(242, 243, 245,1);border-radius:4px;min-height:30px" v-else>{{ hengId }}</div>
        </div>
        <div style="display:flex; align-items: center;margin-bottom:16px">
          <div style="width:100px">装卸班组：</div>
          <a-select v-model="banzu_id" :style="{width:'320px'}" placeholder="请选择班组" @change="changeBanzu" >
            <a-option v-for="(item,index) in banzuList" :value="item.id" :key="index">{{ item.name }}</a-option>
          </a-select>
        </div>
        <div style="display:flex; align-items: center;margin-bottom:16px">
          <div style="width:100px">入库时间：</div>
          <a-date-picker
            style="width: 320px; "
            show-time
            format="YYYY-MM-DD HH:mm"
            v-model="over_time"
          />
        </div>
        <div style="display:flex; align-items: center;margin-bottom:16px">
          <div style="width:100px">备注：</div>
          <div class="flex_1">
            <a-input   placeholder="请输入备注" v-model="remark" allow-clear />
          </div>
          
        </div>

      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted,defineProps } from 'vue'
import predictionLoadDetail from '@/api/prediction/predictionLoadDetail'
import { Message } from '@arco-design/web-vue'
import { Notification } from '@arco-design/web-vue'

import tool from '@/utils/tool'
import * as common from '@/utils/common'
import { request } from "@/utils/request.js";
const crudRef = ref()
// const load_id = ref()
const itemData = ref({})
const cangkuList = ref([])
const showCK = ref(false)
const cangId = ref()
const hengList = ref([])
const hengId = ref()
const zongList = ref([])
const zongId = ref()
const cengList = ref([])
const cengId = ref()
const load_id = ref('')
const load_type = ref(1)
const load_status = ref('')
const banzu_id = ref('')
const banzu_name = ref('')
const banzuList = ref([])
const over_time = ref('')
const remark = ref('')
const open = (row) => {
  crudRef.value.requestData()
}
const direct = ref(false)   // 直接进入 / 间接进入
const load_typeList = ref([
  {name:'提货',id:1},
  {name:'入库',id:2},
  {name:'还箱',id:3},
  {name:'卸火车',id:4},
  {name:'集装箱回箱',id:5},
])
const props = defineProps({
    inforows: {
			default: {},
		},
});
onMounted(()=>{
  if(props.inforows?.id){
    direct.value = false
    load_id.value = props.inforows.id;
    load_type.value = props.inforows.load_type;
    load_status.value = props.inforows.load_status;
    setTimeout(() => {
      crudRef.value.requestData()
    }, 200);
    
  }else{
    options.value.pageSize = 10
    direct.value = true
    setTimeout(() => {
      crudRef.value.requestData()
    }, 200)
  }
  handleBanzuList()
})

const handleBanzuList = () =>{
  request({
    url: "/prediction/banzu/index",
    method: "get",
    params: {
      page:1,
      pageSize:100,
    },
  }).then((res) => {
    banzuList.value = res.data.items;
  })
}
const changeBanzu = (e)=>{
  console.log(e)
}
const handleActive = (id)=>{
  load_type.value = id
  crudRef.value.requestData()
}



const numberOperation = (newValue, id, numberName) => {
  predictionLoadDetail.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchStatus = (statusValue, id, statusName) => {
  predictionLoadDetail.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const zhuangxieRK = (row)=>{
  request({
      url: "/warehouse/master/index",
      method: "get",
      params: {
       
      },
    }).then((res) => {
      cangkuList.value = res.data.items;
      itemData.value = row
      cangId.value = ''
      hengId.value = ''
      hengList.value = []
      zongList.value = []
      zongId.value = ''
      cengList.value = []
      cengId.value = ''
      banzu_id.value = ""
      banzu_name.value = ""
      over_time.value = ""
      remark.value = ""
      showCK.value = true
    });
  
}
const cangChang = (e)=>{
  console.log(e)
  let hengArr = [];
  let zongArr = [];
  let cengArr = [];
  cangkuList.value.map((v,i)=>{
      if(v.id == e){
        for(var i = 1;i<=(v.horizontal_span - 0);i++){
          hengArr.push({name:i,id:i})
        }
        for(var m = 1;m<=(v.release_span - 0);m++){
          zongArr.push({name:m,id:m})
        }
        for(var z = 1;z<=(v.reaches - 0);z++){
          cengArr.push({name:z,id:z})
        }
      }
    })
  hengList.value = hengArr
  zongList.value = zongArr
  cengList.value = cengArr
  
}
const handleShow = ()=>{
  
  showCK.value = false
}
const zhuangxieDel = (row)=>{
  predictionLoadDetail.deletes({ids:[row.id]}).then(res=>{
    Notification.success('删除成功')
    crudRef.value.refresh()
  })
}
const handleBeforeOk = async ()=>{
  console.log('ssssssssssssssssssssss')
  if(!cangId.value){
    Message.error('请选择仓库')
    return false
  }
  if(!hengId.value){
    Message.error('请选择横')
    return false
  }
  let warehouse_id = 0
  warehouse_id = cangId.value
  let res = await request({
		url: "/prediction/loadDetail/update" + `/${itemData.value.id}`,
		method: "put",
		data: {
			warehouse_id:warehouse_id,
      horizontal_position:hengId.value,
      release_position:zongId.value,
      reaches_position:cengId.value,
      banzu_id : banzu_id.value,
      banzu_name : banzu_name.value,
      over_time : over_time.value,
      remark : remark.value
		},
	})
  if(res.code == 200){
    Notification.success('入库成功')
    crudRef.value.refresh()
    return true
  }else{
    Notification.error(res.message)
    return false
  }
  
}


const options = ref({
  id: 'flyos_prediction_load_detail',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  pageSizeOption:[10,50,500],
  pageSize:500,
  operationColumn: true,
  operationWidth: 160,
  autoRequest:false,
  isDbClickEdit:false,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: predictionLoadDetail.getList,
  recycleApi: predictionLoadDetail.getRecycleList,
  add: {
    show: props.inforows.load_type == 4 ?true:false,
    api: predictionLoadDetail.save,
    auth: ['prediction:loadDetail:save']
  },
  edit: {
    show: load_status < 6 && props.inforows.load_type == 5?true:false,
    api: predictionLoadDetail.update,
    auth: ['prediction:loadDetail:update']
  },
  delete: {
    show: false,
    api: predictionLoadDetail.deletes,
    auth: ['prediction:loadDetail:delete'],
    realApi: predictionLoadDetail.realDeletes,
    realAuth: ['prediction:loadDetail:realDeletes']
  },
  recovery: {
    show: false,
    api: predictionLoadDetail.recoverys,
    auth: ['prediction:loadDetail:recovery']
  },
  
  import: {
    
    show: props.inforows.load_type == 4 || props.inforows.load_type == 5?true:false,
    url: 'prediction/loadDetail/import?load_id=' + props.inforows.id,
    templateUrl: 'prediction/loadDetail/downloadTemplate',
    auth: ['prediction:loadDetail:import']
  },
  export: {
    show: true,
    url: 'prediction/loadDetail/export',
    auth: ['prediction:loadDetail:export']
  },
  beforeRequest: (params) => {
    params.load_id = load_id.value
    params.load_type = props.inforows.load_type
  },
  beforeAdd:(formData)=>{
    formData.load_id = load_id.value
    console.log(formData)
    return true
  },
  afterRequest:(params)=>{
    if(props.inforows.load_type == 5){
      
      params.map((v, i) => {
        v.box_type = v?.box?.box_type || ''
        v.work_nickname = ''
        v.box_belong = v?.box?.box_belong
        v.box = v.box.box
        if(v.user_id != 0){
          v.work_nickname = v.user.nickname
        }
        
      });
    }
    params.map((v, i) => {
      if(props.inforows.load_type == 4 && v.detail_load_status == 0){
        v.warehouse_data == ''
      }
    });
    
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  
  {
    title: props.inforows.load_type == 5?"回箱车号":"车号",
    dataIndex: "car_no",
    addDisplay: props.inforows.load_type == 5?false:true,
    formType: "input",
    search: false
  },
  
  {
    title: "品名",
    dataIndex: "goods_name",
    formType: "input",
    addDisplay: false,
    width: 180,
    editDisplay: false,
    hide: props.inforows.load_type == 5?true:false,
    search: false
  },
  
  {
    title: "箱号",
    dataIndex: "box",
    
    formType: "input",
    addDisplay: props.inforows.load_type == 5?true:false,
    editDisplay: false,
    width:180,
    search: false
  },
  // {
  //   title: "箱型箱类",
  //   dataIndex: "box_type",
  //   formType: "input",
  //   addDisplay: false,
  //   editDisplay: false,
  //   width:180,
  //   search: false
  // },
  // {
  //   title: "箱属",
  //   dataIndex: "box_belong",
  //   formType: "input",
  //   addDisplay: false,
  //   editDisplay: false,
  //   search: false
  // },
  {
    title: "作业地点",
    dataIndex: "work_line",
    formType: "input",
    search: false
  },
  {
    title: "车厢位置",
    dataIndex: "transport_number",
    formType: "input",
    search: false
  },
  {
    title: "装卸班组",
    dataIndex: "banzu_name",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width:140,
    search: false
  },
  {
    title: "装卸区",
    dataIndex: "warehouse_id",
    formType: "select",
    width:140,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    search: true,
    dict: {
      url: "warehouse/master/index",
      params:{
        page:1,
        pageSize:500
      },
      props: { label: "name", value: "id" },
    },
  },
  {
    title: "装卸-横",
    dataIndex: "horizontal_position",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width:140,
    hide: true,
    search: true
  },
  {
    title: "装卸-纵",
    dataIndex: "release_position",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width:140,
    hide: true,
    search: true
  },
  {
    title: "装卸-层",
    dataIndex: "reaches_position",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    width:140,
    hide: true,
    search: true
  },
  {
    title: "装卸位置",
    dataIndex: "warehouse_data",
    formType: "input",
    width:140,
    addDisplay: false,
    editDisplay: false,
    hide: load_type == 5?true:false,
    search: false
  },
  {
    title: "完成时间",
    dataIndex: "over_time",
    formType: "range",
    width:200,
    addDisplay: false,
    editDisplay: false,
    search: true,
    showTime: false
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "input",
    width:140,
    addDisplay: false,
    editDisplay: false,
    search: false
  },
  
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "删除者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
defineExpose({ open })
</script>
<style lang="less" scoped>
  .actTab{
    font-weight:600;
    color:rgba(31, 108, 235, 1);
    border-bottom:3px solid rgba(31, 108, 235, 1);
  }
</style>
<script> export default { name: 'prediction:loadDetail' } </script>